<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div style="width: 100%;text-align: center;">
        <h2>表白墙</h2>
        谁:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="username"><p></p>
        对谁:&nbsp;&nbsp;&nbsp;<input id="tousername"><p></p>
        说什么:<input id="msg"><p></p>
        <input type="button" value="提 交" onclick="submit()"><p></p>
        <div id="div_allmsg">

        </div>

    </div>

    <script>
        function submit(){
            var username = jQuery("#username");
            var tousername = jQuery("#tousername");
            var msg = jQuery("#msg");

            //非空校验
            //trim() 是为了防止用户输入空格
            // return 是因为用户没有输入信息，不再执行之后的代码！
            if(username.val().trim() == ""){
                alert("请先输入您的姓名！");
                username.focus();
                return;
            }

            if(tousername.val().trim() == ""){
                alert("请输入对方的姓名！");
                tousername.focus();
                return;
            }

            if(msg.val().trim() == ""){
                alert("请先输入想要传达的信息！");
                msg.focus();
                return;
            }

            // 2.将内容展示在表白墙上
            jQuery("#div_allmsg").append(username.val()+"对"+tousername.val()+"说"+msg.val()+"<p></p>");

            // 3. 清空输入的内容
            username.val("");
            tousername.val("");
            msg.val("");

        }
    </script>
</body>
</html>